import React, { useState, useEffect } from 'react';

import { DatePicker, Select,Space } from 'antd';

import styles from './index.less';
const { Option } = Select;
import ECharts from 'echarts-for-react';
import moment from 'moment';
import { runStateByDevice } from '@/services/deviceupdatestate';
import { formatSeconds } from '@/utils/utils';
export type AlarmProps = {
  display?: string;
  deviceId?:number;
  
};

const DeviceRunState: React.FC<AlarmProps> = (props: any) => {
  

  const { display ,deviceId} = props
  const [cdate, setCdate] = useState(moment());
  const [type, setType] = useState('date');
  

  useEffect(() => {
    let date= moment(cdate).format("YYYY-MM-DD");
    runStateByDevice({deviceId,type,date}).then(function(data){
      let new_data = { ...option };
      new_data.series=data.seriesList;
      new_data.xAxis.data=data.timeList;
      setChartData(new_data);
    })

  }, [cdate,type]);


  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      },
      formatter:function(params){
        var  tooltip=params[0].name;
        for(var i = 0; i < params.length; i++){
          console.log(params[i])
          tooltip+=' <br/> '+params[i].marker + params[i].seriesName + ': ' +   formatSeconds(params[i].value)
        }
        return tooltip;
        }
    },
    legend: {
      textStyle: {
        color: '#fff',
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      axisLine: {
        lineStyle: {
          type: 'dashed',
          color: '#fff',
        },
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
        },
      },
      type: 'category',
      data: []
    },
    yAxis: {
      axisLine: {
        lineStyle: {
          type: 'dashed',
          color: '#fff',
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
        },
      },
      type: 'value',
      name: '时间:s',
    },
    series: []
  };

  function SwitchablePicker() {
    return (
      <Space >
        <div  className={styles.inputBg}  >
          <Select value={type}  bordered={false}    dropdownStyle={{ background: 'rgb(20, 49, 115)'}}  onChange={setType}>
              <Option value="date">日</Option>
              {/* <Option value="week">周</Option> */}
              <Option value="month">月</Option>
              {/* <Option value="quarter">季度</Option> */}
              <Option value="year">年</Option>
          </Select>
        </div>
        <div  className={styles.inputBg} >
          <PickerWithType type={type} onChange={value =>{ setCdate(value)}} />
        </div>
      </Space>
    );
  }

  function PickerWithType({ type, onChange }) {
    if (type === 'date') return <DatePicker  value={cdate}  popupStyle={{ background: 'rgb(20, 49, 115)'}}   bordered={false}  onChange={onChange} />;
    return <DatePicker  value={cdate} popupStyle={{ background: 'rgb(20, 49, 115)'}}     bordered={false}  picker={type} onChange={onChange} />;
  }

  

  const [chartData, setChartData] = useState<Object>(null);

  return (
    <div     style={{display:display}}>
      <div style={{display:'flex',justifyContent:'flex-end'}}>
      <SwitchablePicker  />
      </div>
      {chartData?
        <ECharts   option={chartData} style={{ height: 400, width: '100%' }} />
        :null
      }
    </div>
  );
};

export default DeviceRunState;